<template>
  <div class='realtime-job'>
    <div v-for="(item, index) in realtimeList" :key="index">
      <!-- 名称 -->
      <div class="flex justify-between q-mt-md q-mb-sm">
        <div>{{item.label}}</div>
        <div>{{item.count}}台</div>
      </div>
      <!-- 进度条 -->
      <div class="progress position-relative">
        <div class="p-children position-absolute" :style="{ background: item.color, width: getWidth(item.count) }"></div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'realtime-job',
  props: {
    info: Object
  },
  data () {
    return {
      realtimeList: [{
        label: '正常作业',
        color: 'linear-gradient(90deg, #44D8C6, #5F77FD)',
        count: 0,
        value: 'normalDeviceCount'
      }, {
        label: '稍微落后',
        color: 'linear-gradient(90deg, #E8D127, #F3BC19, #FEAC12)',
        count: 0,
        value: 'slightSlowDeviceCount'
      }, {
        label: '严重落后',
        color: 'linear-gradient(90deg, #FE6D33, #F44941, #EC2449)',
        count: 0,
        value: 'severeDeviceCount'
      }, {
        label: '暂未派工',
        color: 'linear-gradient(90deg, #D3D3D3, #999999)',
        count: 0,
        value: 'idleDeviceCount'
      }],
      total: 0
    }
  },
  watch: {
    info: {
      handler (newPro) {
        const arr = _.cloneDeep(this.realtimeList)
        _.forEach(newPro, (value, key) => {
          _.find(arr, v => v.value === key).count = value
        })
        this.realtimeList = arr
        this.total = _.sum(arr.map(v => v.count))
      },
      deep: true
    }
  },
  computed: {},
  mounted () {
  },
  methods: {
    getWidth (val) {
      if (!this.total) return 0
      return `${(val / this.total) * 100}%`
    }
  }
}
</script>

<style lang='scss' scoped>
.realtime-job{
  height: 220px;
  margin-top: 22px;
  .progress{
    height: 16px;
    background: #e8e8e8;
    border-radius: 8px;
  }
  .p-children{
    height: 16px;
    border-radius: 8px;
    transition: width 500ms ease;
  }
}

</style>
